<template>
  <transition name="yh-setting-fade">
    <div class="setting" :class="{ settingShow: settingShow }" v-show="settingShow">
      <div class="setting_dislog" @click="settingShow = false"></div>
      <div class="setting_inner">
        <div class="setting_header">设置</div>
        <div class="setting_body">
          <!-- <div class="left_shu"> 实时监测</div> -->
          <div class="left_shu">全局设置</div>
          <div class="setting_item">
            <span class="setting_label">
              是否进行自动适配<span class="setting_label_tip">(默认分辨率4500*1080)</span>:
            </span>
            <div class="setting_content">
              <el-radio-group v-model="isScaleradio" @change="(val) => radiochange(val, 'isScale2')">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="left_shu">系统设置</div>
          <!-- <div class="setting_item">
            <span class="setting_label">
              编辑布局: <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="onHome"></el-button>
            </span>
          </div> -->
          <div class="left_shu">系统配置</div>
          <div class="setting_item">
            <span class="setting_label">
              数字孪生是否使用公网: <span class="setting_label_tip"></span>
            </span>
            <div class="setting_content">
              <el-radio-group v-model="sbtxradio" @change="(val) => radiochange(val, 'sbtxSwiper')">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <!-- <div class="setting_item">
            <span class="setting_label"> 皮肤切换: </span>
            <div class="setting_content">
              <el-radio-group v-model="ssyjradio" @change="(val) => radiochange(val, 'ssyjSwiper')">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </div>
          </div> -->
          <br />
          <!-- <div class="left_shu">退出登录</div>
          <div class="setting_item"> 
            <span class="setting_label"> 退出登录: </span>
            <div class="setting_content">
              <el-radio-group
                v-model="isStyleradio"
                @change="(val) => radiochange(val, 'isStyle')"
              >
                <el-radio :label="true">样式1</el-radio>
                <el-radio :label="false">样式2</el-radio>
              </el-radio-group>
            </div>
          </div> -->
          <div class="flex justify-center">
            <el-button-group>
              <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="onHome">返回首页</el-button>
              <el-button type="primary" size="mini" @click="onSignout">退出登录<i
                  class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      settingShow: false,
      sbtxradio: true,
      ssyjradio: true,
      isScaleradio: true,
      isStyleradio: true,
    };
  },
  computed: {},
  methods: {
    init() {
      this.settingShow = true;
    },
    radiochange(val, type) {
      this.$store.commit('setting/updateSwiper', { val, type });
      // if (type === 'isScale2') {
      //   // this.$router.go(0)
      //   // location.reload()
      //   // window.location.href=window.location.href+"?t="+Date.now()
      // }
      // if (type === 'isStyle') {
      //   this.$router.push(val ? `/index` : `/index1`);
      // }
    },
    onSignout() {
      localStorage.removeItem('token');
      this.$router.push('/login');
    },
    onHome() {
      // this.$router.push("/admin");
      this.$router.push('/launch');
    },
  },
  created() {
    this.$store.commit('setting/initSwipers');
    (this.sbtxradio = this.$store.state.setting.sbtxSwiper),
      (this.ssyjradio = this.$store.state.setting.ssyjSwiper),
      (this.isScaleradio = this.$store.state.setting.isScale2),
      (this.isStyleradio = this.$store.state.setting.isStyle);
  },
  mounted() {
    document.body.appendChild(this.$el);
  },
  beforeDestroy() { },
  destroyed() {
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el);
    }
  },
};
</script>

<style lang="scss" scoped></style>
